<template>
  <div class="CheckPerfectInfo">
    <div class="CheckPerfectInfo-Header">
      <div class="CheckPerfectInfo-Header-Lfet"></div>
      <div class="CheckPerfectInfo-Header-Right">家长信息</div>
    </div>
    <div class="CheckPerfectInfo-Body">
      <div class="CheckPerfectInfo-Body-Item-Icon" @click="ParentImg()"><img :src="parentInfo.headerimg" /></div>
      <!--<div class="CheckPerfectInfo-Body-Item" style="margin-top: 20px;">
				<div class="CheckPerfectInfo-Body-Item-title">家长ID：</div>
				<div class="CheckPerfectInfo-Body-Item-name">{{parentInfo.parentid}}</div>
			</div>-->
      <!--<div class="CheckPerfectInfo-Body-Item">
				<div class="CheckPerfectInfo-Body-Item-title">注册账号：</div>
				<div class="CheckPerfectInfo-Body-Item-name">{{parentInfo.account}}</div>
			</div>-->
      <div class="CheckPerfectInfo-Body-Item">
        <div class="CheckPerfectInfo-Body-Item-title">姓名：</div>
        <div class="CheckPerfectInfo-Body-Item-name">{{parentInfo.name?parentInfo.name:'获取失败请重试'}}</div>
      </div>
      <!--<div class="CheckPerfectInfo-Body-Item">
				<div class="CheckPerfectInfo-Body-Item-title">身份：</div>
				<div class="CheckPerfectInfo-Body-Item-name">{{parentInfo.identity}}</div>
			</div>-->
      <!--<div class="CheckPerfectInfo-Body-Item">
				<div class="CheckPerfectInfo-Body-Item-title">学历：</div>
				<div class="CheckPerfectInfo-Body-Item-name">{{parentInfo.education}}</div>
			</div>-->
      <!--<div class="CheckPerfectInfo-Body-Item">
				<div class="CheckPerfectInfo-Body-Item-title">身份证：</div>
				<div class="CheckPerfectInfo-Body-Item-name">{{parentInfo.id_number}}</div>
			</div>-->
      <div class="CheckPerfectInfo-Body-Item">
        <div class="CheckPerfectInfo-Body-Item-title">联系电话：</div>
        <div class="CheckPerfectInfo-Body-Item-name">{{parentInfo.phone | Phone}}</div>
      </div>
      <!--<div class="CheckPerfectInfo-Body-Item">
				<div class="CheckPerfectInfo-Body-Item-title">户口所在地：</div>
				<div class="CheckPerfectInfo-Body-Item-name">{{parentInfo.residence}}</div>
			</div>-->
      <div class="CheckPerfectInfo-Body-Item">
        <div class="CheckPerfectInfo-Body-Item-title">工作单位：</div>
        <div class="CheckPerfectInfo-Body-Item-name">{{parentInfo.work}}</div>
      </div>
    </div>
    <div class="CheckPerfectInfo-Magin">

    </div>
    <div class="CheckPerfectInfo-Et">
      <div class="CheckPerfectInfo-Header">
        <div class="CheckPerfectInfo-Header-Lfet"></div>
        <div class="CheckPerfectInfo-Header-Right">儿童信息</div>
      </div>
      <div class="CheckPerfectInfo-Body" v-for="(item,index) in childInfo">
        <div class="CheckPerfectInfo-Body-Item-Icon" @click="ChildImg(index)"><img :src="item.headerimg" /></div>
        <!--<div class="CheckPerfectInfo-Body-Item" style="margin-top: 20px;">
					<div class="CheckPerfectInfo-Body-Item-title">儿童ID：</div>
					<div class="CheckPerfectInfo-Body-Item-name">{{item.childrenid}}</div>
				</div>-->
        <div class="CheckPerfectInfo-Body-Item">
          <div class="CheckPerfectInfo-Body-Item-title">姓名：</div>
          <div class="CheckPerfectInfo-Body-Item-name">{{item.name}}</div>
        </div>
        <div class="CheckPerfectInfo-Body-Item">
          <div class="CheckPerfectInfo-Body-Item-title">昵称：</div>
          <div class="CheckPerfectInfo-Body-Item-name">{{item.nickname }}
          </div>
        </div>
        <!--<div class="CheckPerfectInfo-Body-Item">
					<div class="CheckPerfectInfo-Body-Item-title">英文名：</div>
					<div class="CheckPerfectInfo-Body-Item-name">{{item.ename}}</div>
				</div>-->
        <div class="CheckPerfectInfo-Body-Item">
          <div class="CheckPerfectInfo-Body-Item-title">性别：</div>
          <div class="CheckPerfectInfo-Body-Item-name">{{item.sex}}</div>
        </div>
        <!--<div class="CheckPerfectInfo-Body-Item">
					<div class="CheckPerfectInfo-Body-Item-title">出生日期：</div>
					<div class="CheckPerfectInfo-Body-Item-name">{{item.birthday}}</div>
				</div>-->
        <!--<div class="CheckPerfectInfo-Body-Item">
					<div class="CheckPerfectInfo-Body-Item-title">年龄：</div>
					<div class="CheckPerfectInfo-Body-Item-name">{{item.age}}</div>
				</div>
				<div class="CheckPerfectInfo-Body-Item">
					<div class="CheckPerfectInfo-Body-Item-title">国籍：</div>
					<div class="CheckPerfectInfo-Body-Item-name">{{item.nationality}}</div>
				</div>-->
        <!--<div class="CheckPerfectInfo-Body-Item">
					<div class="CheckPerfectInfo-Body-Item-title">民族：</div>
					<div class="CheckPerfectInfo-Body-Item-name">{{item.nation}}</div>
				</div>-->
        <!--<div class="CheckPerfectInfo-Body-Item">
					<div class="CheckPerfectInfo-Body-Item-title">户籍：</div>
					<div class="CheckPerfectInfo-Body-Item-name">{{item.residence}}</div>
				</div>-->
        <!--<div class="CheckPerfectInfo-Body-Item">
					<div class="CheckPerfectInfo-Body-Item-title">家庭住址：</div>
					<div class="CheckPerfectInfo-Body-Item-name">{{item.address}}</div>
				</div>-->
        <!--<div class="CheckPerfectInfo-Body-Item">
					<div class="CheckPerfectInfo-Body-Item-title">所在幼儿园：</div>
					<div class="CheckPerfectInfo-Body-Item-name">{{item.sid}}</div>
				</div>
				<div class="CheckPerfectInfo-Body-Item">
					<div class="CheckPerfectInfo-Body-Item-title">班主任：</div>
					<div class="CheckPerfectInfo-Body-Item-name">{{item.teacher_id}}</div>
				</div>
				<div class="CheckPerfectInfo-Body-Item">
					<div class="CheckPerfectInfo-Body-Item-title">是否使用校车：</div>
					<div class="CheckPerfectInfo-Body-Item-name">{{item.use_car }}
					</div>
				</div>-->
      </div>
    </div>

    <div class="CheckPerfectInfo-Btn" v-show='check==1'>
      <button @click="queren()">确认信息</button>
    </div>
    <!--<div class="">
			{{LocalId}}
		</div>
		<div class="" >
			{{DataInfo}}
		</div>
		<div id="vconso" style="height: 150px;background-color: red;">
			vconsole
		</div>-->
  </div>
</template>

<script>
  import {
    Indicator,
    Toast
  } from 'mint-ui';
  export default {
    name: 'CheckPerfectInfo',
    data() {
      return {
        check: 1,
        parentInfo: '',
        childInfo: '',
        LocalId: {
          parentImgId: '',
          childImgId: []
        },
        childID: [],
        DataInfo: ''
      }
    },
    created: function () {
      this.GetInfo();
      this.GetWx()
      this.check = this.$route.params.id;
      this.$alloylever.config({
        cdn: '//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js', //vconsole的CDN地址
        reportUrl: "//a.qq.com", //错误上报地址
        reportPrefix: 'qun', //错误上报msg前缀，一般用于标识业务类型
        reportKey: 'msg', //错误上报msg前缀的key，用户上报系统接收存储msg
        otherReport: { //需要上报的其他信息
          uin: 491862102
        },
        entry: "#vconso" //请点击这个DOM元素6次召唤vConsole。//你可以通过AlloyLever.entry('#entry2')设置多个机关入口召唤神龙
      })


    },
    // 格式化
    filters: {
      Phone: function (v) {
        v = "" + v;
        return v.replace(v.substring(3, 7), "****")
      }
    },
    methods: {
      queren: function () {
        var ImgInit = 'http://xyb.wujiaping.cn/static/school//image/parent_default.png';
        var ChildImg = true;
        this.childInfo.forEach(function (v, i) {
          if (v.headerimg == ImgInit) {
            ChildImg = false;
          }
        })
        if (this.parentInfo.headerimg == ImgInit) {

          Indicator.open({
            text: '请上传家长头像...',
          });
          setTimeout(function () {
            Indicator.close();
          }, 1500)
        } else if (!ChildImg) {
          Indicator.open({
            text: '请上传儿童头像...',
          });
          setTimeout(function () {
            Indicator.close();
          }, 1500)
        } else {
          Indicator.open({
            text: '提交中...',
          });
          var sessionId = sessionStorage.getItem('sessionId');
          var vm = this
          this.DataInfo = {
            'sessionId': sessionId,
            'parent': {
              'id': vm.parentInfo.id,
              'media_id': vm.LocalId.parentImgId
            },
            'child': {
              'id': vm.childID,
              'media_id': vm.LocalId.childImgId
            }
          }
          this.$ApiCom.Confirm(this.DataInfo).then(function (res) {
            Indicator.close();
            if (res.data.errCode == 1001) {
              Indicator.open({
                text: '登陆失效...',
              });
              setTimeout(() => {
                Indicator.close();
                var Sid = localStorage.getItem('Sid');
              vm.$router.push({
                path: `/Login`
              })
              }, 1000);
            } else if (res.data.errCode == 1002) {
              Indicator.open({
                text: '授权失效...',
              });
              // 加密路径，回调路径
              var IndexInfo = encodeURIComponent(window.location.href);
              // 获取sessionId
              var sessionId = sessionStorage.getItem('sessionId');
              setTimeout(() => {
                Indicator.close();
                // 授权
                location.href = 'http://xyb.wujiaping.cn/parent/login/getWxInfo?redirectUri=' + IndexInfo +
                  '&&sessionId=' + sessionId;
              }, 1000);
            } else if (res.data.errCode == 0) {
              Indicator.open({
                text: res.data.errMsg,
              });
              setTimeout(function () {
                vm.$router.push({
                  path: `/SetPayPwd`
                })
                Indicator.close();
              }, 1000)
            } else {
              Indicator.open({
                text: res.data.errMsg,
              });
              setTimeout(function () {
                Indicator.close();
              }, 1000)
            }
          })
        }
      },
      GetInfo: function () {
        Indicator.open({
          text: '信息获取中...',
        });
        var vm = this
        var sessionId = ''
        if(localStorage.getItem('sessionId')!=null){
            sessionId = localStorage.getItem('sessionId')
        }else{
            sessionId = sessionStorage.getItem('sessionId')
        }
        console.log('sessionId——>Check验证',sessionId)
        this.$ApiCom.CheckPerfect(sessionId).then(function (res) {
          Indicator.close();
          vm.parentInfo = res.data.data.parentInfo;
          if (vm.parentInfo.headerimg == null) {
            vm.parentInfo.headerimg = 'http://xyb.wujiaping.cn/static/school//image/parent_default.png'
          } else {
            vm.parentInfo.headerimg = 'http://xyb.wujiaping.cn/' + vm.parentInfo.headerimg
          }
          res.data.data.childInfo.forEach(function (v) {
            vm.childID.push(v.id)
            vm.LocalId.childImgId.push('')
            if (v.headerimg == null) {
              v.headerimg = 'http://xyb.wujiaping.cn/static/school//image/parent_default.png'
            } else {
              v.headerimg = 'http://xyb.wujiaping.cn/' + v.headerimg
            }
          })
          vm.childInfo = res.data.data.childInfo;
        }, function (err) {
          Indicator.close();
          Toast({
            message: '响应超时',
            duration: 1000
          });
          setTimeout(function () {
            var Sid = localStorage.getItem('Sid');
            vm.$router.push({
              path: `/Login`
            })
            Indicator.close();
          }, 1000)
        })
      },
      GetWx: function () {
        var vm = this
        var ref = encodeURIComponent(window.location.href.split('#')[0]);
        this.$ApiCom.Wx(ref).then(function (res) {
          var data = res.data.data
          vm.$wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名
            jsApiList: ['translateVoice', 'chooseImage', 'previewImage', 'uploadImage'] // 必填，需要使用的JS接口列表
          });
        })
      },
      ParentImg: function () {
        var vm = this
        this.$wx.ready(function () {
          vm.$wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有;
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
              var localIds = res.localIds;
              vm.LocalId.parentImgId = localIds[0];
              if (window.__wxjs_is_wkwebview) {
                vm.$wx.getLocalImgData({
                  localId: localIds[0], // 图片的localID
                  success: function (res) {
                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                    vm.parentInfo.headerimg = localData;
                  }
                });
              } else {
                vm.parentInfo.headerimg = localIds[0];
              }
              vm.$wx.uploadImage({
                localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                  var serverId = res.serverId; // 返回图片的服务器端ID
                  vm.LocalId.parentImgId = serverId
                }
              });
            }
          })
        });
      },
      ChildImg: function (index) {
        var vm = this
        var index = index
        this.$wx.ready(function () {
          vm.$wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有;
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res, as) {
              var localIds = res.localIds;
              vm.LocalId.childImgId[index] = localIds[0];
              if (window.__wxjs_is_wkwebview) {
                vm.$wx.getLocalImgData({
                  localId: localIds[0], // 图片的localID
                  success: function (res) {
                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                    console.log(vm.childInfo[index].headerimg)
                    vm.childInfo[index].headerimg = localData
                  }
                });
              } else {
                vm.childInfo[index].headerimg = localIds[0]
              }
              vm.$wx.uploadImage({
                localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                  var serverId = res.serverId; // 返回图片的服务器端ID
                  vm.LocalId.childImgId[index] = serverId
                }
              });
            }
          })

        });
      }
    }
  }

</script>

<style scoped>
  @import url("css/CheckPerfectInfo.css");

</style>
